<template>
	<view>
		<view class="header">
			<u-navbar :border-bottom='false' back-icon-size='48' :background='background' back-icon-color='#333333'
				title-color='#333333' title="城市合伙人"></u-navbar>
			<view class="title">
				城市合伙人尊享特权
			</view>
			<view class="text-ul">
				<view class="text-li">
					<image src="../../../static/imgs/gou.png" mode=""></image>
					<text>分享收益</text>
				</view>
				<view class="text-li">
					<image src="../../../static/imgs/gou.png" mode=""></image>
					<text>被动收益</text>
				</view>
				<view class="text-li">
					<image src="../../../static/imgs/gou.png" mode=""></image>
					<text>星级分红</text>
				</view>
				<view class="text-li">
					<image src="../../../static/imgs/gou.png" mode=""></image>
					<text>星级奖励</text>
				</view>
			</view>
			<view class="jionIn">
				<text style="color: #FF0000;">加入送价值29900元的VIP卡</text><text>(100张)</text>
			</view>
		</view>
		<view class="banner">
			<view class="qy-ul">
				<view class="qy-li">
					<image src="../../../static/imgs/zxws.png" mode=""></image>
					<view class="title">
						尊享玩商
					</view>
					<view class="text">
						<text>终身尊享</text>
						<text>城市合伙人身份</text>
					</view>
				</view>
				<view class="qy-li">
					<image src="../../../static/imgs/wzsj.png" mode=""></image>
					<view class="title">
						玩赚世界
					</view>
					<view class="text">
						<text>边玩边赚</text>
						<text>省钱+赚钱</text>
					</view>
				</view>
				<view class="qy-li">
					<image src="../../../static/imgs/zsvip.png" mode=""></image>
					<view class="title">
						终身VIP
					</view>
					<view class="text">
						<text>终身享受</text>
						<text>i世界VIP权益</text>
					</view>
				</view>
			</view>
			<view class="btn">
				<view class="price">¥9949</view>
				<view class="text">终身尊享玩商</view>
				<view class="sub" @click="open">
					立即开通
				</view>
			</view>
		</view>
		<view class="exclu">
			<view class="title">
				<image src="../../../static/imgs/zuobian.png" mode=""></image>
				<text>城市合伙人专享优惠</text>
				<image src="../../../static/imgs/youbian.png" mode=""></image>
			</view>
			<view class="item-ul">
				<view class="item-li" v-for="(item,index) in vipList" :key='index'>
					<image :src="item.icon" mode=""></image>
					<view class="tit">
						{{item.title}}
					</view>
					<view class="priceBox">
						<view class="price">
							¥{{Number(item.vip_price).toFixed(0)}}
						</view>
						<view class="tex">
							可福利金抵扣
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showPayway" mode="bottom" closeable border-radius='16'>
			<view class="payPop">
				<view class="title">
					选择支付方式
				</view>
				<view class="pay-ul">
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/weixinzf.png" mode=""></image>
							<text>微信</text>
						</view>
						<u-checkbox v-model="weiPaycheck" shape="circle" @change="weiChange" size="30"></u-checkbox>
					</view>
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/zhifubaozf.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<u-checkbox v-model="alPaycheck" shape="circle" @change="aliChange" size="30"></u-checkbox>
					</view>
				</view>
				<view class="pay" @click="confirmPay">
					支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				alPaycheck: false,
				weiPaycheck: false,
				showPayway: false,
				vipList: [],
				payCode: '',
				payId: '',
				background: {
					backgroundColor: 'rgba(208, 185, 143,1)'
				}
			}
		},
		onLoad() {
			this.getTrave()
		},
		methods: {
			confirmPay() {
				let {
					payCode
				} = this
				if (!payCode) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../../homePage/pay/pay?payCode=' + this.payCode + '&payId=' + this.payId
				})
			},
			weiChange(e) {
				if (e.value) {
					this.alPaycheck = false
					this.payCode = '6004'
				}
			},
			aliChange(e) {
				if (e.value) {
					this.weiPaycheck = false
					this.payCode = '6005'
				}
			},
			async open() {
				if(!this.$store.state.userInfo.province){
					uni.showModal({
						content:'暂未设置归属地,是否前往设置?',
						success(res) {
							if(res.confirm) {
								uni.navigateTo({
									url:'../editInfo/editInfo'
								})
							}
						}
					})
					return
				}
				let res = await myRequest.upVip({
					user_level: '4'
				})
				if (res.status) {
					this.payId = res.pay_id
					this.showPayway = true
				}
			},
			// 获取vip专享
			async getTrave() {
				let {
					page
				} = this
				let res = await myRequest.getTravel({
					page: '1',
					num: '1000'
				})
				if (res.status) {
					let list = []
					res.data.forEach((item) => {
						if (item.is_vip == 1) {
							list.push(item)
						}
					})
					list = list.sort(function() {
						return (0.5 - Math.random());
					})
					this.vipList = list.slice(0, 3)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 500rpx;
		@include bgi('../../../static/imgs/hehuorenbgi.png');

		.title {
			width: 100%;
			text-align: center;
			font-size: 56rpx;
			font-family: SourceHanSansCN-Bold;
			color: #242424;
			padding-top: 32rpx;
		}

		.text-ul {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 0 60rpx;

			.text-li {
				image {
					width: 32rpx;
					height: 26rpx;
				}
			}
		}

		.jionIn {
			width: 518rpx;
			height: 52rpx;
			border: 2rpx solid #242424;
			border-radius: 80rpx;
			margin: 40rpx auto 0;
			line-height: 52rpx;
			text-align: center;
		}
	}

	.banner {
		margin-top: -100rpx;
		width: 100%;
		height: 520rpx;
		@include bgi('../../../static/imgs/hehuorenban.png');

		.qy-ul {
			padding-top: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.qy-li {
				width: 198rpx;
				height: 252rpx;
				border: 2rpx solid #202020;
				border-radius: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 132rpx;
					height: 132rpx;
				}

				.title {
					font-size: 26rpx;
					font-family: SourceHanSansCN-Regular;
					color: #242424;
				}

				.text {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #7D7D7D;
					padding: 0 10rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}

		.btn {
			width: 680rpx;
			height: 88rpx;
			background-color: #333333;
			border-radius: 44rpx;
			margin: 46rpx auto 0;
			display: flex;
			align-items: center;
			padding: 0 42rpx;

			.price,
			.text,
			.sub {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FCF2E1;
			}

			.text {
				margin-left: 20rpx;
			}

			.sub {
				margin-left: auto;
			}
		}
	}

	.exclu {
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 88rpx;
				height: 16rpx;
			}

			text {
				font-size: 32rpx;
				font-family: SourceHanSansCN-Regular;
				color: #242424;
				margin: 0 42rpx;
			}
		}

		.item-ul {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 20rpx;

			.item-li {
				width: 228rpx;
				height: auto;
				border-radius: 16rpx;
				background: #FFFFFF;
				padding-bottom: 10rpx;
				overflow: hidden;

				image {
					width: 228rpx;
					height: 228rpx;
				}

				.tit {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					height: 66rpx;
					overflow: hidden;
				}

				.priceBox {
					display: flex;
					align-items: center;
					margin: 10rpx auto 0;

					.price {
						width: fit-content;
						height: 36rpx;
						background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
						border-radius: 8rpx 0px 0px 8rpx;
						font-size: 20rpx;
						font-family: Arial;
						font-weight: bold;
						line-height: 36rpx;
						color: #333333;
						padding: 0 4rpx;
					}

					.tex {
						width: fit-content;
						height: 36rpx;
						background: #333333;
						border-radius: 0px 8rpx 8rpx 0px;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 36rpx;
						color: #FBE8B8;
						padding: 0 4rpx;
					}
				}
			}
		}
	}

	.payPop {
		padding-bottom: 20rpx;

		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.pay-ul {
			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pay-li-left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

			}
		}

		.pay {
			width: 694rpx;
			height: 88rpx;
			background: linear-gradient(56deg, #FEA837 0%, #FF7700 100%);
			margin: 0 auto;
			border-radius: 8rpx;
			font-size: 40rpx;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	/deep/ .u-checkbox__label {
		margin-right: 12rpx !important;
	}
</style>
